<template>
<div>
    <div  class="nav"  >
        <img src="" alt="">
    <span class="iconfont icon-zuojiantou nihao" @click="fun()"></span>
      <input type="text" placeholder="在花店频道内搜索" >
      <span class="iconfont icon-ditu nihao"></span>
    </div>
    <div class="navbx">
      <select>
        <option value="" v-for="(v,i) in arr" :key="i">
          {{v.name}}
        </option>
      </select>
      <select>
        <option value="" v-for="(v,i) in arr" :key="i">
          {{v.text}}
        </option>
      </select>
      <select>
        <option value="" v-for="(v,i) in arr" :key="i">
          {{v.text1}}
        </option>
      </select>
      <select>
        <option value="" v-for="(v,i) in arr" :key="i">
          {{v.text2}}
        </option>
      </select>
    </div>
  <div class="content" v-for="(v,is) in tpid" :key="is" @click="funtwoye()">
        <div class="left">
          <img :src="v.storeImg" alt=""/>
        </div>
        <div class="right">
          <h5 class="title">{{v.storeName}}</h5>
            <p class="mass">
              <img class="start" src="yangchao/imgs/xingxin.png" alt="" />
              <img class="start" src="yangchao/imgs/xingxin.png" alt="" />
              <img class="start" src="yangchao/imgs/xingxin.png" alt="" />
              <img class="start" src="yangchao/imgs/xingxin.png" alt="" />
              <img class="start" src="yangchao/imgs/xingxin.png" alt="" />
              <span class="orgren">3.9</span> <span>1086</span>条
              ￥<span>{{v.storePrice}}</span>
            </p >
          <p><span>{{v.storeArea}}</span> <span>花店</span></p >
          <p class="pjad">
          <img class="pj" src="yangchao/imgs/dianpin.png" alt="" /><span
            class="adress"
            >致意长辈</span
          >
          </p >
          <p>“以后鲜花就交给遇见花主了,专业度还是刚”</p >
          <p class="last-line">
          <span class="orgren tuan">团</span> <span class="orgren">￥</span>
          <span class="orgren">39.9</span> <span>单人下午茶</span>
          </p >
        </div>
  </div>
  <hr>
  </div>
  
</template>

<script>
import {yccmethod} from "@/api/yangchao.js"
import qs from "qs" 
import axios from "axios"
export default {
    data(){
    return {
        arr:[],
        obj:[],
        tpid:[]
        }
    },
    created(){
      axios.request("http://localhost:8889/one").then((ok)=>{
            // console.log(ok)
            this.arr=ok.data
        })
      // axios.request("http://localhost:8889/two")
      //   .then((ok)=>{
      //       console.log(ok)
      //       this.obj=ok.data
      //   })

        yccmethod(qs.stringify({tpid: this.tpid})).then(ok=>{
            // console.log(ok);
            if(ok.data.code==1){
            // console.log(ok.data.data)
            this.tpid=ok.data.data
          }
        })
    



    },
    methods:{
      funtwoye(){
        this.$router.push("/twoye")
      },
       fun(){
            this.$router.push("/")

    }
    },


    
}
</script>

<style  scoped lang="scss">
  .nav{
    height: 13vw;
    margin-top: 2.667vw;
    margin-left: -2.667vw;
  }
  .navbx{
    width: 100vw;
    height: 9.333vw;
  }
  select{
    width: 25%;
    border: none;
    font-size: 3.467vw;
  }
  input{
    width: 77vw;
    height: 7.333vw;
    border-radius: 4.667vw;
    text-align: center;
    font-size: 3.2vw;
    border: none;
    background-color: #f0f0f0;
    padding-top:1.6vw;
  }
  .nihao{
    margin: 0 2.667vw;
    font-size: 6.667vw;
  }
  .start{
    width: 2.667vw;
      height: 2.667vw;
  }
  .left{
    img{
      width: 17.6vw;
      height: 17.6vw;
    }
  }
  .content{
    height: 29.333vw;
    display: flex;
  }
  .title{
    font-size: 3.467vw;
  }
  .pj{
    width: 21.333vw;
    height: 2.667vw;
  }
  p{
    font-size: 3.2vw;
  }
  .right{
    margin-top: -0.8vw;
    margin-left:2.667vw;
}
</style>